<template>
	<div>
		<seller-tap>
			<span slot='font'>收货地址</span>
			<a :href="target" class="fa fa-chevron-left" slot='a'></a>
		</seller-tap>

		<main>
			<div v-if="buller.area.length<=0" class="noCun">
				还没有收货地址呢，快去添加吧~
			</div>
			<ul>
				<li v-for=" (item,ins) in buller.area" :key='ins'>
					<p>{{item.name}} <span>{{item.phone}}</span></p>
					<p>{{item.area}}</p>
					<p>
						<span @click="indexArea($event,ins)">
						<i v-if="!item.index" class="fa fa-square-o"></i>
						<i v-if="item.index" class="fa fa-check-square"></i>
						<span v-if="!item.index">默认地址</span>
						<span v-if="item.index">设为默认</span>
						</span>
						<span @click="remove($event,ins)">
							
							<i class="fa fa-trash"></i>删除
						</span>
					</p>
				</li>
			</ul>
			
			
			
			<div class="foot">
				<a :href="areaTarget">添加新地址</a>
			</div>
		</main>

	</div>
</template>

<script>
	import { mapState, mapGetters } from 'vuex'
	import axios from 'axios'
	import SellerTap from '../components/SellerTap'
	export default {
		data: function() {
			return {
				buller:null,
				target:'',
				areaTarget:''
			
			}
		},
		components: {
			SellerTap,

		},
		computed: {
			...mapState([
				'seller', 'categorys', 'buller'
			]),
		},
		methods:{
			remove(ev,ins){
				axios.get('/buller/removeArea?ins='+ins).then((result)=>{
					this.buller = result.data.buller;
				}).catch((err)=>{
					console.log(err);
				})
			},
			indexArea(ev,ins){
				axios.get('/buller/removeArea?ins='+ins+'&edit=true').then((result)=>{
					this.buller = result.data.buller;
				}).catch((err)=>{
					console.log(err);
				})
			}
		},
		mounted(){
			
			if(this.$route.query.id) {
				var color = this.$route.query.color;
				var model = this.$route.query.model;
				var num = this.$route.query.num;
				var good_id = this.$route.query.id;
				this.target = '#/buller/bullgoods?num='+num+'&model='+model+'&color='+color+'&id='+good_id
			}else if(this.$route.query.car){
				this.target = '#/buller/bullGoods'
				
			}else{
				this.target = '#/buller/self'
			}
			
			if(this.$route.query.car){
	
				this.areaTarget = '#/buller/addArea?car=ee'
			}else if(this.$route.query.id){
				this.areaTarget = '#/buller/addArea/?num='+this.$route.query.num+'&model='+this.$route.query.model+'&color='+this.$route.query.color+'&id='+this.$route.query.id
			}else{
				this.areaTarget = '#/buller/addArea'
			}
			
			axios.get('/buller/checkLogin').then((result) => {

				this.buller = result.data.data;

			}).catch((err) => {
				console.log(err);
			})
		}
		
	}
</script>

<style scoped>
	main {
		padding-bottom: 47px;
		height: 100vh;
		
	}
	
	div.foot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1000;
		text-align: center;
		line-height: 47px;
		background: linear-gradient(to right, #ff8800 10%, #ff4400 80%);
	}
	
	div.foot a {
		display: block;
		font-size: 14px;
		color: white;
	}
	.noCun{
		padding: 30px;
		text-align: center;
		color:#555;
	}
	ul{
		background: #eee;
		border-bottom: solid 1px #EEEEEE;
		padding-bottom: 47px;

	}
	ul li{
		background: white;
		padding: 15px 10px;
		margin-bottom: 8px;
	}
	ul li p{
		padding: 3px 0;
	}
	ul li p:last-child{
		border-top: solid 1px #EEEEEE;
	}
	ul li p:first-child{
		overflow: hidden;
	}
	ul li p:first-child span{
		float: right;
	}
	ul li p:nth-child(2){
		font-size: 13px;
	}
	ul li p:last-child{
		overflow: hidden;
		font-size: 13px;
	}
	ul li p:last-child span:first-child{
		float: left;
	}ul li p:last-child span:last-child{
		float: right;
		color: #777777;
		cursor: pointer;
	}
	ul li i{
		margin-right: 7px;
	}
	ul li i.fa-check-square{

		color: orangered;
		cursor: pointer;
	}
	ul li i.fa-square-o{
		color: darkgray;
		cursor: pointer;
	}
	
</style>
